<script setup>
import { onMounted } from 'vue';
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';



const props = defineProps({
  id: {
    type: String,
    default: 'mse'
  },
  url: {
    type: String,
    default: '//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-720p.mp4'
  },
  playsinline: {
    type: Boolean,
    default: true
  },
  height: {
    type: Number,
    default: 99
  },
  width: {
    type: Number,
    default: 176
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  volume: {
    type: Number,
    default: 0
  },
  controls: {
    type: Boolean,
    default: false
  },
  poster: {
    type: String,
    default: ''
  }
})
onMounted(() => {
  let player = new Player({
    id: props.id,
    url: props.url,
    playsinline: props.playsinline,
    height: props.height,
    width: props.width,
    autoplay: props.autoplay,
    volume: props.volume,
    controls: props.controls,
    poster: props.poster,
    loop: true
  });
})
</script>

<template>
  <div class="w-full h-full" :id="id"></div>
</template>

<style  scoped></style>
